<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>收入流水明细</title>
    <link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/user/register.css" media="all">
    <script src="${ctx}/static/js/laydate/laydate.js"></script>
    <style type="text/css">
        .content {
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px
        }

        .selected-content {
            margin-top: 0px;
            padding-bottom: 0px;
            padding-top: 0px;
            background-color: #469fe3;
            color: white;
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .unselected-content {
            margin-top: 0px;
            padding-bottom: 0px;
            padding-top: 0px;
            background-color: #f8f8f8;
            color: #25282e;
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .select-li {
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .select-date {
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .div-noUnpay {
            margin: 0px auto;
            text-align: center;
            color: #898989;
            padding-top: 10px
        }
    </style>
</head>
<body>
<header class="ui-header ui-header-stable  ui-container" style="margin-top: 5%;">
    <div class="ui-tiled" id="tabDivDate" style="width: 100%;">
        <ul class="ui-tiled ui-border">
            <li class="select-li" id="today">今日</li>
            <li class="select-li" id="yesterday"></li>
            <li class="select-li" id="twooldday"></li>
            <li class="select-date" id="spanDateSelected">其他日期
            </li>
        </ul>
    </div>
</header>
<section class="ui-container" style="margin-top: 60px;">
    <div class="ui-tab ui-tab-revenue" id="tab1">
        <ul class="ui-tab-nav ui-border-b">
            <li class="current" id="liCashIncome">现金收入</li>
            <li id="liPlarformIncome">慧付单收入</li>
        </ul>
        <ul class="ui-tab-content" style="width: 300%">
            <li id="liCashIncomeContent">
                <ul class="ui-list ui-list-pure ui-border-tb">
                    <c:if test="${cashList != null &&  fn:length(cashList) > 0 }">
                        <c:forEach var="cashItem" items="${cashList}">
                            <li class="ui-border-t">
                                <div class="ui-row-flex" style="font-size: 17px;">
                                    <div class="ui-col ui-col-2">
                                        <span style="font-size: 20px;">${cashItem.carNo}</span>
                                        <p class="ui-txt-info" style="font-size: 15px;">
                                            入场时间:
                                            <fmt:formatDate value="${cashItem.inTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </p>
                                        <p class="ui-txt-info" style="font-size: 15px;">
                                            出场时间:
                                            <fmt:formatDate value="${cashItem.outTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </p>
                                    </div>
                                    <div class="ui-col"
                                         style="font-size: 30px;padding-top:10px; padding-right: 5px; text-align: right;">
                                        ￥<fmt:formatNumber type="number" value="${cashItem.charge / 10 }"
                                                           pattern="0.00" maxFractionDigits="2"/>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>
                    <c:if test="${cashList == null ||  fn:length(cashList) == 0 }">
                        <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
                             style="height: 450; overflow: auto; background-color: #f8f8f8">
                            <div id="noCashTransDiv" class="div-noUnpay">
                                <div>
                                    <img alt="" src="${ctx}/static/image/recharge/nodata.png" width="150px">
                                </div>
                                <div class="div-text" style="padding-top: 20px">无现金收入记录</div>
                            </div>
                        </div>
                    </c:if>
                </ul>
            </li>

            <li id="liPlatformIncomeContent">
                <ul class="ui-list ui-list-pure ui-border-tb">
                    <c:if test="${platformList != null &&  fn:length(platformList) > 0 }">
                        <c:forEach var="cashItem" items="${platformList}">
                            <li class="ui-border-t">
                                <div class="ui-row-flex" style="font-size: 17px;">
                                    <div class="ui-col ui-col-2">
                                        <span style="font-size: 20px;">${cashItem.carNo}</span>
                                        <p class="ui-txt-info" style="font-size: 15px;">
                                            入场时间:
                                            <fmt:formatDate value="${cashItem.inTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </p>
                                        <p class="ui-txt-info" style="font-size: 15px;">
                                            出场时间:
                                            <fmt:formatDate value="${cashItem.outTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </p>
                                    </div>
                                    <div class="ui-col"
                                         style="font-size: 30px;padding-top:10px; padding-right: 5px; text-align: right;">
                                        ￥<fmt:formatNumber type="number" value="${cashItem.charge / 10 }"
                                                           pattern="0.00" maxFractionDigits="2"/>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>
                    <c:if test="${platformList == null ||  fn:length(platformList) == 0 }">
                        <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
                             style="height: 450; overflow: auto; background-color: #f8f8f8">
                            <div id="noPlatformTransDiv" class="div-noUnpay">
                                <div>
                                    <img alt="" src="${ctx}/static/image/recharge/nodata.png" width="150px">
                                </div>
                                <div class="div-text" style="padding-top: 20px">无慧付单收入记录</div>
                            </div>
                        </div>
                    </c:if>
                </ul>
            </li>
        </ul>
    </div>
</section>
<section id="dialog">
    <div class="ui-dialog" id="div_dialog">
    </div>
</section>
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>
    window.addEventListener('load', function () {
        var tab = new fz.Scroll('.ui-tab', {
            role: 'tab',
            autoplay: false,
            interval: 3000
        });
        /* 滑动开始前 */
        tab.on('beforeScrollStart', function (from, to) {
            console.log(from, to);
        })
        /* 滑动结束 */
        tab.on('scrollEnd', function (curPage) {
            console.log(curPage);
        });
    });

    function GetDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;//获取当前月份的日期
        var d = dd.getDate();
        return y + "-" + m + "-" + d;
    }

    var paramObj = {
        "transDetailParams": "${transDetailParams}"//查看详细收入流水
    };

    $(function () {
        var yesterday = GetDateStr(-1);
        $("#yesterday").html(yesterday);
        var twooldday = GetDateStr(-2);
        $("#twooldday").html(twooldday);
        var today = GetDateStr(0);


        var dataParams = $.trim("${date}");
        if (dataParams) {
            console.log("dataParams:" + dataParams + ",yesterday:" + yesterday + ",twooldday:" + twooldday + ",today:" + today);
            removeClass();
            if (dataParams == yesterday) {
                $("#yesterday").removeClass("unselected-content");
                $("#yesterday").addClass("selected-content");
            } else if (dataParams == twooldday) {
                $("#twooldday").removeClass("unselected-content");
                $("#twooldday").addClass("selected-content");
            } else if (dataParams == today) {
                $("#today").removeClass("unselected-content");
                $("#today").addClass("selected-content");
            } else {
                $(".select-date").html(dataParams);
                $(".select-date").removeClass("unselected-content");
                $(".select-date").addClass("selected-content");
            }

        }

        var initFlag = true;
        $("#spanDateSelected").bind("click", function () {
            $(".ui-dialog").addClass("show");
            if (initFlag) {
                initDateSelected();
                initFlag = false;
            }
        });
        var currentDate = new Date().format("yyyy-MM-dd").toString();
        $(".select-li").click(function () {
            var select_date = $(this).html();
            if (select_date == "今日") {
                select_date = currentDate;
            }
            console.log("select_date:" + select_date);
            if ($(this).hasClass("selected-content")) {
                return;
            }
            removeClass();
            $(this).removeClass("unselected-content");
            $(this).addClass("selected-content");
            var hrefUrl = "${action}?params=" + paramObj.transDetailParams + "&date=" + select_date;
            window.location.href = hrefUrl;
        });


    });

    function initDateSelected() {
        var currentDate = new Date().format("yyyy-MM-dd").toString();
        $("#spanDateSelected").html(currentDate);
        initFlag = false;
        laydate.render({
            show: true,
            elem: '#div_dialog', //指定元素
            position: 'static',
            showBottom: true,
            btns: ['confirm'],
            done: function (value, date, endDate) {
                removeClass();
                $(".select-date").removeClass("unselected-content");
                $(".select-date").addClass("selected-content");

                $(".ui-dialog").removeClass("show");
                $("#spanDateSelected").html(value);
                console.log(value);
                var hrefUrl = "${action}?params=" + paramObj.transDetailParams + "&date=" + value;
                window.location.href = hrefUrl;
            }
        });
    }

    function removeClass() {
        $(".select-li").removeClass("selected-content");
        $(".select-li").addClass("unselected-content");
        $(".select-date").removeClass("selected-content");
        $(".select-date").addClass("unselected-content");
    }

</script>
</html>
